<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      class="onlineUser"
      @on-load="getList"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <!-- <template slot-scope="scope" slot="menu">
                    <el-button icon="el-icon-document"  type="text" @click="kickOut(scope.row)" v-if="userOnlineManager_btn_tickout">强退</el-button>
      </template>-->

      <template slot-scope="scope" slot="menu" v-if="userOnlineManager_btn_tickout">
        <el-popover placement="top" width="180">
          <p>确定强制退出该用户吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
            <el-button type="primary" size="mini" @click="kickOut(scope.row)">确定</el-button>
          </div>
          <el-button slot="reference" size="mini" type="text">强退</el-button>
        </el-popover>
      </template>

      <template slot="menuLeft">
        <!-- <el-button type="danger" size="small" icon="el-icon-close" @click="kickArr()" v-if="userOnlineManager_btn_tickout">强退</el-button> -->
        <el-button type="warning" size="small" icon="el-icon-download" @click="exportData()" v-if="userOnlineManager_btn_export">导出</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { fetchList, kickOut } from '~/admin/api/online-user'
import { tableOption } from '~/admin/const/online-user'
import { mapGetters } from 'vuex'

export default {
  name: 'familyclueregisterverify',
  data () {
    return {
      searchForm: {},
      tableData: [

      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      filter: '',
      kickoutArr: [],
      userOnlineManager_btn_tickout: false,
      userOnlineManager_btn_export: false,
    }
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  created () {

    this.userOnlineManager_btn_tickout = this.permissions['sys_user_tickOut']
    this.userOnlineManager_btn_export = this.permissions['sys_user_export']
  },
  methods: {
    // selectionChange(list){
    //     this.kickoutArr = []
    //     for(let obj of list){
    //         this.kickoutArr.push(obj.key);
    //     }
    //     console.log('选中的数据'+ JSON.stringify(list),list.length);
    // },
    getList (page) {
      this.tableLoading = true
      fetchList(

        Object.assign({
          page: page.currentPage - 1,
          size: page.pageSize,
          sort: 'id,desc',
          // filter: this.filter
        }, this.searchForm)

      ).then(response => {
        this.tableData = response.data.content
        this.page.total = response.data.totalElements
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    kickOut (row) {
      let arr = [];
      arr.push(row.key);
      kickOut(arr).then((response => {
        this.getList(this.page);
      }))
    },
    kickArr () {

      let arr = this.unique(this.kickoutArr);
      this.$confirm(`确认强退选中的${arr.length}个用户?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        kickOut(arr).then((response => {
          this.getList(this.page);
        }))
      }).catch(() => { })

    },
    unique (arr) {
      return Array.from(new Set(arr))
    },
    exportData () {
      this.publicExport('在线用户数据', '/auth/online/download', this.filter)
    },

    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange (current) {
      this.page.currentPage = current
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page)
      done()
    },
    refreshChange () {
      this.getList(this.page)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.onlineUser {
  .avue-form__group .el-form-item {
    .el-form-item__label {
      display: none;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>